<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./js/bootstrap-table.min.js">
</head>

<body>
    <!-- 顶部导航 -->

    <!-- 顶部导航 -->
    <div class="container">
        <div class="row">
            <table class="table">

            </table>
        </div>
    </div>


    <div class="modal fade" id="modal-id">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title text-center ">添加文章</h4>
                </div>
                <div class="modal-body">

                    <form action="#" method="POST" class="form-horizontal" role="form">
                        <input type="hidden" id="_id" name="_id">

                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">标题</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="title" name="title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="content" class="col-sm-2 control-label">正文</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="content" cols="30" rows="5"
                                    name="content"></textarea>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="top" class="col-sm-2 control-label">置顶</label>
                            <div class="col-sm-10">
                                <input type="checkbox" class="form-control" id="top" style="width: 34px; height: 34px;">

                            </div>
                        </div>


                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>


    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.validate.min.js"></script>
    <script src="./js/tableExport.min.js"></script>
    <script src="./js/jspdf.min.js"></script>
    <script src="./js/jspdf.plugin.autotable.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-table.min.js"></script>
    <script src="./js/bootstrap-table-print.min.js"></script>
    <script src="./js/bootstrap-table-export.min.js"></script>
    <script>
        $(function () {
            load();

            $(".table").on("click", ".glyphicon-remove", function () {
                var id = $(this).parent().attr("data-id");
                if (confirm(`确定要删除${id}?`)) {

                    $.ajax({
                        url: "http://localhost:3000/content",
                        type: "DELETE",
                        data: { _id: id },
                        success: function (res) {
                            if (res.status === 200) {

                                load();
                            }
                        }
                    })
                }
            })


            $(".table").on("click",".glyphicon-edit" ,function(){
              
                  //动态
                  var id = $(this).parent().attr("data-id");
                  
                  $.ajax({
                      url:`http://localhost:3000/content/${id}`,
                      type:"GET",
                      success:function (res) {
                          if(res.status === 200) {
                              const data = res.data;
                               //静态
                              $(".modal-title").html("修改文章");
                              $("#_id").val(id);
                              $("#title").val(data.title)
                              $("#content").val(data.content)
                              $("#top").prop("checked",data.top)
                               //显示
                             $("#modal-id").modal("show")
                          }
                          //console.log(res);
                      }
                  })
                
            })

        $('#modal-id').on('hidden.bs.modal',function() {
            $("#_id").val("")
                $("#title").val("")
                $("#content").val("")
                $("#top").prop("checked",false);
        })

            $("#modal-id form").validate({
                submitHandler: function () {
                    var id = $("#_id").val();
                    var title = $("#title").val();
                    var content = $("#content").val();
                    var top = $("#top").prop("checked");
                    if(id){
                        $.ajax({
                        url: `http://localhost:3000/content/${id}`,
                        type: "PUT",
                        data: { title, content, top },
                        success: function (res) {
                            //console.log(res);
                            if (res.status === 200) {
                                $("#modal-id").modal("hide")
                                load();
                            } else {
                                alert(res.msg);
                            }
                        }

                    })
                

                    }
                    else{

                    $.ajax({
                        url: "http://localhost:3000/content",
                        type: "POST",
                        data: { title, content, top },
                        success: function (res) {
                            //console.log(res);
                            if (res.status === 200) {
                                $("#modal-id").modal("hide")
                                load();
                            } else {
                                alert(res.msg);
                            }
                        }

                    })
                }
                $("#_id").val("")
                $("#title").val("")
                $("#content").val("")
                $("#top").prop("checked",false);
                },
                rules: {
                    title: {
                        required: true,
                        minlength: 6,
                        maxlength: 12
                    },
                    content: {
                        required: true,
                        minlength: 10,
                        maxlength: 50
                    }
                },
                messages: {
                    title: {
                        required: "请输入标题",
                        minlength: "标题最小6个字符",
                        maxlength: "标题最多12个字符"
                    },
                    content: {
                        required: "请输入内容",
                        minlength: "内容最小10个字符",
                        maxlength: "内容最多50个字符"
                    }

                }
            });

            $("#modal-id").on("click", ".btn-primary", function () {
                $(this).closest(".modal-content").find("form").submit();
            })



            function load() {

                $.ajax({
                    url: "http://localhost:3000/content",
                    type: "GET",
                    success: function (res) {
                        if (res.status === 200) {
                            $('.table').bootstrapTable('destroy').bootstrapTable({
                                data: res.data,
                                //url:"请求地址" 数据源

                                pagination: true, //启用大小
                                pageSize: 3,//分页大小
                                //pageList:[5,10,20], //分页大小

                                showToggle: true,//列表视图
                                showPaginationSwitch: true,//分页开关
                                showFullscreen: true,//全屏显示
                                //showRefresh:true,//刷新，仅支持URL数据源
                                search: true,//启用查询
                                showSearchButton: true,//显示按钮
                                clickToSelect: true,
                                showPrint: true,//打印
                                showExport: true,//下载打印

                                //列
                                columns: [{
                                    field: "state",
                                    checkbox: true
                                }, {
                                    field: '_id',
                                    title: '编号'
                                }, {
                                    field: 'title',
                                    title: '标题'
                                }, {
                                    field: 'content',
                                    title: '内容'
                                },
                                {
                                    field: 'top',
                                    title: '是否置顶',
                                    formatter: function (value, data) {
                                        //value 当前列的值
                                        //data 当前行的数据
                                        return value ? "是" : "否";
                                    }




                                }
                                    , {
                                    title: "操作",
                                    formatter: function (value, data) {
                                        return ` <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-edit text-primary"></span></a>
                            <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-remove text-danger"></span></a>
                        `;
                                    }
                                }

                                ],

                                //自定义按钮集合
                                buttons: function () {
                                    return {
                                        btnAdd: {
                                            icon: 'glyphicon glyphicon-plus',
                                            event: function () {
                                                //alert('添加')
                                                $(".modal-title").html("添加文章");

                                                $("#modal-id").modal("show")
                                            },
                                            attributes: {
                                                title: "add",
                                                // "data-toggle":"modal",
                                                //  href:'#modal-id',
                                            }
                                        },

                                        btnDel: {
                                            icon: 'glyphicon glyphicon-remove',
                                            event: function () {
                                                //获取所有选中的行对应的绑定数据
                                                var ids = $(".table").bootstrapTable("getSelections");
                                                console.log(ids);
                                                $.ajax({
                                                    url: "http://localhost:3000/content",
                                                    type: "DELETE",
                                                    //data:{_id:ids},
                                                    data: { _id: { $in: ids } },
                                                    success: function (res) {
                                                        console.log(res);
                                                        if (res.status === 200) {
                                                            load();
                                                        }
                                                    }
                                                })

                                            },
                                            attributes: {
                                                title: "remove"
                                            }
                                        }
                                    }
                                }
                            })



                        }
                    }
                })
            }
        })

    </script>
</body>

</html>